<template>
  <div>
        <van-nav-bar class="app-nav-bar" title="异常处理新增" left-arrow @click-left="onClickLeft"/>
        <el-form label-width="80px"  :model="ruleForm" ref="ruleForm">
            <el-form-item label="学号:"  prop="name">
                <el-input v-model="ruleForm.studentNo"></el-input>
            </el-form-item>
            <el-form-item label="班级:">
                <template>
                    <el-select v-model="ruleForm.className" placeholder="请选择">
                        <el-option
                        v-for="item in className"
                        :key="item.id"
                        :label="item.className"
                        :value="item.id">
                        </el-option>
                    </el-select>
                    </template>
                <!-- {{tableData.className}} -->
            </el-form-item>
            <el-form-item label="学生姓名:" prop="studentName">
                <el-input v-model="ruleForm.studentName"></el-input>
                <!-- {{tableData.studentName}} -->
            </el-form-item>
            <el-form-item label="宿舍:" prop="dorAddress">
                <el-input v-model="ruleForm.dorAddress"></el-input>
                <!-- {{tableData.dorAddress}} -->
            </el-form-item>
             <el-form-item label="处理状态:">
                <template>
                    <el-select v-model="ruleForm.status" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.dictValue"
                        :label="item.dictLabel"
                        :value="item.dictValue">
                        </el-option>
                    </el-select>
                    </template>
            </el-form-item>
            <el-form-item label="处理描述:">
                <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    v-model="ruleForm.processDesc"
                    show-word-limit>
                </el-input>
            </el-form-item>
            <el-button type="success" class="btncolor" @click="tj">提交</el-button>
        </el-form>
  </div>
</template>

<script>
export default {
data(){
        return{
            tableData:[],
            options:[],
            className:[],
            ruleForm: {
                studentNo: '',
                className: '',
                studentName: '',
                dorAddress: '',
                status:'',
                processDesc: '',
            }
        }
    },
    methods:{
        // app/Attence/addExc
        tj(){
            var form = new FormData();
            //可以通过append()方法来追加数据
            form.append("studentNo",this.form.studentNo);
            form.append("className",this.form.className);
            form.append("studentName",this.form.studentName);
            form.append("dorAddress",this.form.dorAddress);
            form.append("status",this.form.status);
            form.append("processDesc",this.form.processDesc);
            this.request({
                method:"post",
                url:"app/Attence/addExc",
                Headers:{
                    "Content-Type":"multipart/form-data"
                },
                data:form,
            }).then((res) =>{
                console.log(res);
                if(res.data.status == "200"){
                    this.$toast.success("事件上报成功!");
                    this.$router.push("/ExcDetail");
                }else{
                    this.$toast.fail("事件上报失败!");
                    this.$router.push("/ExcDetail")
                }
            });
        },
        onClickLeft(){
            this.$router.go(-1) 
        },
        async getUser(){
            var {data:res} =await this.request.get('app/Attence/getAppExcById?id='+this.$route.params.id)
            console.log(res);
            this.tableData=res.data;
            var {data:res} =await this.request.get('app/Attence/getProStatusListAll')
            console.log(res);
            this.options=res.data;
            var {data:res} =await this.request.get('app/Attence/getClassListAll')
            console.log(res);
            this.className=res.data;
        },
    },created(){
        this.getUser();
    }
}
</script>

<style>
.el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    width: 120px !important;
}
.el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
    margin-left: 80px;
}
.el-form-item {
    margin-bottom: 5px!important;
}
.el-form{
    padding: 55px 16px!important;
}
.el-input {
    width: 65%  !important;
}
</style>